<template>
    <transition name="fade">
        <div class="modal">
            <scroll class="modal-wrapper">
                <div>
                    <slot></slot>
                </div>
            </scroll>
            <div class="close" @click="close">
                <i class="icon iconfont icon-close"></i>
            </div>
        </div>
    </transition>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'           //缓动框架
export default {
    data() {
        return {}
    },
    props: {},
    components: {Scroll},
    methods: {
        //点击关闭按钮，给父元素发送事件
        close() {
            console.log(111)
            this.$emit('closeModal')
        }
    }
}
</script>
<style  lang="less" scoped>
@import "../../common/less/variable.less";
//手机信息的模态框
.modal{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:100;
    background:rgba(0,0,0,0.7);
    .modal-wrapper{
        position:fixed;
        top:50%;
        left:0;
        width:90%;
        transform: translate(5%,-50%);
        border-radius: 5px;
        background:#fff;
        min-height:200px;
        max-height:60%;
        overflow:hidden;
    }
    //关闭按钮
    .close{
        position:absolute;
        left:0;
        bottom:50px;
        width:100%;
        text-align:center;
        i{
            font-size:25px;
            color:#fff;
            padding:10px;
        }
    }
}
</style>
